<html>
<head>
	<script type="text/javascript">
		djConfig = { 
			isDebug: true
		};
	</script>
	<script type="text/javascript" src="../../dojo.js"></script>
	<script type="text/javascript">
		dojo.require("dojo.widget.DropdownContainer");
	</script>
	<style>
		html, body {
			width: 100%;
			height: 100%;
		}
		.popup { background-color: white; }
	</style>
</head>
<body>
<h1> DropdownContainer tests </h1>

<div dojoType="dropdowncontainer" id="foo"><div style="border: 1px solid blue;" class="popup">some content for the first <br/>dropdown container</div></div>
<br><br>
<h3>Instantiation from Script:</h3>
<div id="dropdown"><div style="border: 1px solid black;" class="popup">some content for the second <br/>dropdown container</div></div>
<script type="text/javascript">
	dojo.addOnLoad(function(){
		var params = {id: "dropdown"};
		var widget = dojo.widget.createWidget("DropdownContainer", params, dojo.byId("dropdown"));
	});
</script>

<h3>Dynamically disabled DropdownContainer</h3>
<div>
	<input id="enabler" type="checkbox" onchange="dojo.widget.byId('bar')[this.checked ? 'enable' : 'disable']();" />
	<label for="enabler">enable</label>
	<div dojoType="dropdowncontainer" id="bar" disabled="1">
		<div style="border: 1px solid blue;" class="popup">some content for the 3rd <br/>dropdown container</div>
	</div>
</div>

</body>
</html>
